<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button>按钮1</button>
			<button>按钮2</button>
			<button>按钮3</button>
			<button>按钮4</button>
			<button>按钮5</button>
		</div>


		<ul>
			<li>第一个li</li>
			<li>第二个li</li>
			<li>第三个li</li>
			<li>第四个li</li>
			<li>第五个li</li>
		</ul>

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var liList = document.querySelectorAll('li');  //共5个li
	for(var i = 0;i<liList.length;i++){
		liList[i].onclick = function(){
		//每次执行 函数里面的输出语句的时候，此时的i已经被全局i一个个覆盖了
			console.log(i)
		}
	}
			var func;
			if(true){
				let name='kobe'
				func = function(){
					console.log(name);
				}
			}
			aa='james'
			func()
			console.log(aa);



			
			//3.没有块级作用域引起的问题：for的块级
			// 为什么闭包可以解决问题
			var btns = document.getElementsByTagName('button');
			//for存在 没有块级作用域的定义  在这里，i被升级为全局变量，每次都被赋值了
			for (var i = 0; i < btns.length; i++) {
				btns[i].addEventListener('click', function() {
					console.log('第' + i + '个按钮被点击');
			})
		}

			//以下两种 方式解决 for循环闭包问题  
//(3)由于var并不是块级作用域，每个赋值都会被覆盖，在运行内部函数时，i的值已经变成了5，不能达到所想要的效果。
			for (var i = 0; i < btns.length; i++) {
				(function(num) {
					btns[num].addEventListener('click', function() {
						console.log('第' + num + '个按钮被点击');
					})
					//这里是对函数立即执行  ，在for循环里面立即执行了
				})(i)
			}
			
			//对于let来说，他会创建一个块级作用域
			for (let i = 0; i < btns.length; i++) {
				btns[i].addEventListener('click', function() {
					console.log('第' + i + '个按钮被点击');
				})
			}
		</script>
	</body>
</html>
